<template>
	<div class="w100 h100 flex-col p-t-26 p-l-10 p-r-10">
		<div class="btn_box flex">
			<div class="btn p-10 pointer" :class="{ checked: active == 1 }" @click="active = 1">钻孔应力详情</div>
			<div class="btn p-10 m-l-10 pointer" :class="{ checked: active == 2 }" @click="active = 2">支架压力详情</div>
			<div class="btn p-10 m-l-10 pointer" :class="{ checked: active == 3 }" @click="active = 3">异常告警</div>
			<div class="btn p-10 m-l-10 pointer" :class="{ checked: active == 4 }" @click="active = 4">实时数据查询</div>
		</div>

		<Transition name="fade-transform" mode="out-in" appear>
			<div class="f1 h0 p-t-10 p-b-10" v-if="active == 1">
				<page1 class="h100" />
			</div>
			<div class="f1 h0 p-t-10 p-b-10" v-else-if="active == 2">
				<page2 class="h100" />
			</div>
			<div class="f1 h0 p-t-10 p-b-10" v-else-if="active == 3">
				<page3 class="h100" />
			</div>
			<div class="f1 h0 p-t-10 p-b-10" v-else="active == 4">
				<page4 class="h100" />
			</div>
		</Transition>
	</div>
</template>

<script setup name="/monitoring/pressure">
import page1 from './components/page1.vue'
import page2 from './components/page2.vue'
import page3 from './components/page3.vue'
import page4 from './components/page4.vue'

let active = ref(1)
</script>

<style lang="scss" scoped>
.btn_box {
	color: #fff;
}
.btn {
	opacity: 1;
	border-radius: 4px;
	background: linear-gradient(180deg, #1c437e 1%, #091f40 100%);
	box-shadow: 0px 2px 2px 0px #091121, inset 0px -1px 2px 0px rgba(255, 255, 255, 0.4);
}
.checked {
	background: linear-gradient(180deg, #2c62b3 1%, #0e3064 100%);
}
</style>
